<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
    <div class="app-index">
        <div class="slide">
           
                <!-- <div class="slide_left"></div> --> 
                <div class="swiper-container slide_left">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../imgs/course-img01.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../imgs/course-img03.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../imgs/course-img04.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
            
        </div>
        <div class="how">
            <a href="#"><div class="how_left">
                <p>今日排名</p>
                <span id="rank">9</span>
            </div></a>
            <a href="#"><div class="how_right">
                <p>累计打卡 <span id="punchIn">23</span> 天</p>
                <span id="isPunch">今日打卡</span>
            </div></a>
        </div>
        <div class="sport">
            <a href="#"><div class="sport_left">
                <p>运动数据</p>
            </div></a>
            <a href="#"><div class="sport_right">
                <p>累积运动徽章</p>
                <p> <span id="insigniaNum">3</span> 枚</p>
            </div></a>
        </div> 
        <div class="course">
            <a href="#"><div class="course_left">
                <p>课程训练</p>
            </div></a>
        </div>
        <div class="outdoors">
            <a href="#"><div class="outdoors_left">
                <p>户外跑步</p>
            </div></a>
        </div>
        <div class="foot">
            <a href="#" class="active">
                <i class="iconfont">&#xe615;</i>
                <span>首页</span>
            </a>
            <a href="./sports.html">
                <i class="iconfont">&#xe60d;</i>
                <span>运动</span>
            </a>
            <a href="./my.html">
                <i class="iconfont">&#xe78a;</i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html>